<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <fieldset>
        <legend>查询条件</legend>
        <div>
            <label for="age">年龄：</label>
            <input type="number" id="age">
        </div>
        <div>
            <label for="sex">性别：</label>
            <select id="sex">
                <option></option>
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
        </div>
        <div>
            <label for="tel">电话：</label>
            <input type="tel" id="tel">
        </div>
        <div>
            <button id="btn1">查询</button>
        </div>
    </fieldset>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>电话</th>
            </tr>
        </thead>
        <tbody id="tbody">

        </tbody>
    </table>

</body>
<script type="module">
    import list from "./list.js";
    import * as fun from "./fun.js";

    let age = document.querySelector("#age");
    let sex = document.querySelector("#sex");
    let tel = document.querySelector("#tel");

    let tbody = document.querySelector("#tbody");

    let btn1 = document.querySelector("#btn1");
    btn1.addEventListener("click", function () {
        let listValue = [...list];

        let ageValue = age.value;
        if (ageValue != "") {
            listValue = fun.queryAsAge(listValue, parseInt(ageValue));
        }

        let sexValue = sex.value;
        if (sexValue != "") {
            listValue = fun.queryAsSex(listValue, sexValue);
        }

        let telValue = tel.value;
        if (telValue != "") {
            listValue = fun.queryAsTel(listValue, telValue);
        }
        createTBody(listValue);
    });

    function createTBody(arr) {
        // 清空表格体数据
        tbody.innerHTML = "";
        arr.forEach(v => {
            let tr = document.createElement("tr");

            let td = document.createElement("td");
            td.innerText = v.name;
            tr.appendChild(td);
            
            td = document.createElement("td");
            td.innerText = v.age;
            tr.appendChild(td);

            td = document.createElement("td");
            td.innerText = v.sex;
            tr.appendChild(td);

            td = document.createElement("td");
            td.innerText = v.tel;
            tr.appendChild(td);

            tbody.appendChild(tr);
        })
    }


</script>

</html>